import React, { Component } from 'react'
import Header from './components/Header/Header'
import List from './components/List/List'
import Footer from './components/Footer/Footer'
import './App.css'
import context from "./context"
export default class App extends Component {
  state = {
    // 读取本地存储
    todos: JSON.parse(localStorage.getItem('todos')) || [],
    id:undefined,
  }
  // 🐷修改任务名
  EditTodoName = (id , todoName) => {
    const newTodos = this.state.todos.map((item)=>{
      if(item.id===id) item.todoName = todoName
      return item
    })
    this.setState({
      id:undefined,
      todos:newTodos,
    })
  }
  // 🐷切换复选框或者文本框
  EditToggle = (id) => {
    this.setState({
      // 当传过来的id和state里面的id相等时，在执行此函数，就是点击了取消按钮，来取消编辑
      // 此时需要把文本框隐藏，复选框显示，操作ID为undefined时，文本框隐藏，并且按钮里边的文字自动更改为编辑
      id:this.state.id===id?undefined:id
    })
  }
  // 🐷添加
  Add = (todoName) => {
    const todo = {
      id: Date.now(),
      todoName,
      isDone: false
    }
    const newTodos = [...this.state.todos]
    newTodos.push(todo)
    this.setState({
      todos: newTodos
    })
  }
  // 🐷删除
  Del = (id) => {
    const newTodos = this.state.todos.filter((item) => item.id !== id)
    this.setState({
      todos: newTodos
    })
  }
  // 🐷操作单条数据的isDone
  UpdataOneIsDone = (id) => {
    const newTodos = this.state.todos.map((item) => {
      if (item.id === id) item.isDone = !item.isDone
      return item
    })
    this.setState({
      todos: newTodos
    })
  }
  // 🐷操作所有数据的isDone
  UpdataAllIsDone = () => {
    // 判断是否所有的数据的isDone都为true,如果都为true则为true，否则为false
    const flag = this.state.todos.every((item) => item.isDone)
    const newTodos = this.state.todos.map((item) => {
      item.isDone = !flag
      return item
    })
    this.setState({
      todos: newTodos
    })
  }
  // 🐷清除所有已经完成的任务
  Clear = () => {
    const newTodos = this.state.todos.filter((item) => !item.isDone)
    this.setState({
      todos: newTodos
    })
  }
  render() {
    const { todos , id } = this.state
    // 将每次最新的数据更新到本地存储
    localStorage.setItem('todos',JSON.stringify(todos))
    return (
      <context.Provider value={{
        id,
        todos,
        Add: this.Add,
        Del: this.Del,
        Clear: this.Clear,
        EditToggle:this.EditToggle,
        EditTodoName:this.EditTodoName,
        UpdataOneIsDone: this.UpdataOneIsDone,
        UpdataAllIsDone: this.UpdataAllIsDone,
      }}>
        <div className="todo-container">
          <div className="todo-wrap">
            <Header></Header>
            {todos.length ?
              <div>
                <List todos={todos}></List>
                <Footer></Footer>
              </div>:
              <h1>恭喜你，完成了所有任务！</h1>
            }
          </div>
        </div>
      </context.Provider>
    )
  }
}
